<template>
  <el-card class="box-card">
    <div slot="header" class="box-header">
      <span>铭文资料</span>
      <el-button style="float: right; padding: 3px 0" type="text">X</el-button>
    </div>
    <div>
      <el-table ref="filterTable" :data="tableData">
        <el-table-column prop="ming_id" label="铭文" sortable width="180">
          <template slot-scope="scope">
            <el-avatar
              :size="40"
              shape="square"
              :src="
                'https://game.gtimg.cn/images/yxzj/img201606/mingwen/' +
               +
                scope.row.ming_id +
                '.png  '
              "
            >
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="ming_id"
          label="铭文编号"
          sortable
          width="100"
        ></el-table-column>
        <el-table-column prop="ming_type" label="铭文类型" width="100">
        </el-table-column>
        <el-table-column prop="ming_name" label="铭文名称" width="100">
        </el-table-column>
        <el-table-column prop="ming_grade" label="铭文级别" width="180">
        </el-table-column>
        <el-table-column
          prop="ming_des"
          label="铭文描述"
          width="400"
        ></el-table-column>
      </el-table>
    </div>
  </el-card>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    this.query();
  },
  methods: {
    query() {
      fetch("http://47.241.102.141:3000/mings")
        .then((response) => response.json())
        .then((data) => {
          for (let i = 0; i < 8; i++) {
            this.tableData.push(data[i]);
          }
        });
    },
  },
};
</script>
<style>
.box-card {
  width: 90%;
}

.box-header {
  display: flex;
  justify-content: space-between;
}
</style>